<template>
	<view class="app">
		<view class="pic">
			<image src="../../static/logo.png" mode="aspectFill"></image>
		</view>
		<view class="mid">
			<u--form labelPosition="left" :rules="userRules" :model="user" ref="uForm">
				<u-form-item borderBottom label-width="150rpx">
					<!-- border="none"不显示边框; label-width="150rpx"设置宽度 -->
					&nbsp;用户昵称&nbsp;:
					<u--input border="none" v-model="user.nickname"></u--input>
				</u-form-item>
				<u-form-item class="username" borderBottom label-width="150rpx">
					&nbsp;账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;:
					<u--input border="none" v-model="user.username"></u--input>
				</u-form-item>
				<u-form-item class="password" borderBottom label-width="150rpx" prop="password">
					&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;:
					<u--input border="none" v-model="user.password"></u--input>
				</u-form-item>
				<u-form-item borderBottom label-width="150rpx" prop="phone">
					&nbsp;手&nbsp;&nbsp;机&nbsp;&nbsp;号&nbsp;:
					<u--input border="none" v-model="user.phone"></u--input>
				</u-form-item>
				<u-form-item class="mail" borderBottom label-width="150rpx">
					&nbsp;邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱&nbsp;:
					<u--input border="none" v-model="user.mail"></u--input>
				</u-form-item>
				<view class="code">
					<u-code-input class="codenum" v-model="code" :maxlength="4"></u-code-input>
					<!-- uCode很重要 -->
					<u-code :seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<view class="box" @click="getCode">
						<u-button type="success" size="normal">
							<text>{{tips}}</text>
						</u-button>
					</view>
				</view>
			</u--form>
			<u-toast ref="uToast"></u-toast>
			<u-button class="register" size="normal" color="rgb(60,156,255)" :plain="true" shape="circle"
				@click="toRegister">
				<text>注册</text>
			</u-button>
		</view>

	</view>
</template>

<script>
	import {
		checkPhone,
		checkMail
	} from "@/utils/tool.js"
	import {
		sendMail,
		register
	} from "@/api/user.js"
	export default {
		data() {
			return {
				user: {
					nickname: "",
					username: "",
					password: "",
					phone: "",
					mail: "",
					avatar: ""
				},
				code: "",
				tips: "",
				APICode: "",
				msgList: {
					type: "success",
					message: "获取验证码成功"
				},
				userRules: {
					phone: [{
						required: true,
						message: '电话是必填的',
						trigger: ['blur', 'change'],
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}],
					password: [{
							required: true,
							message: '密码是必填的',
							trigger: ['blur', 'change'],
						}, {
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['change', 'blur']
						}, // 6-8个字符之间的判断
						{
							min: 6,
							max: 12,
							message: '长度在6-12个字符之间',
							trigger: ['change', 'blur']
						}
					]
				},
			};
		},
		methods: {
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			getCode() {
				if (this.user.mail == "") {
					this.fillMsg("error", "请先输入邮箱!");
				} else {
					if (!checkMail(this.user.mail)) {
						this.fillMsg("error", "请输入正确的邮箱!");
					} else {
						if (this.$refs.uCode.canGetCode) {
							uni.showLoading({
								title: "正在发送验证码"
							})
							setTimeout(() => {
								uni.hideLoading();
							}, 2200)
							sendMail({
								mail: this.user.mail
							}).then(res => {
								console.log("请求API接口【user/register/sendMailCode】", res);
								if (res.statusCode == 200) {
									this.APICode = res.data;
									console.log("API验证码是:", this.APICode);
									setTimeout(() => {
										this.fillMsg("success", "验证码发送成功,请注意查收!");
										// uni.$u.toast('验证码已发送'); // 这里此提示会被this.start()方法中的提示覆盖
										this.$refs.uCode.start(); // 通知验证码组件内部开始倒计时
									}, 2000);
								} else {
									this.fillMsg("error", "验证码获取失败,邮箱不存在");
								}
							})
						} else {
							// uni.$u.toast('倒计时结束后再发送');
							this.fillMsg("error", "倒计时结束后再发送");
						}
					}
				}
			},
			codeChange(text) {
				this.tips = text;
				// console.log(text);//想知道text可以打印看看
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			end() {
				// uni.$u.toast('倒计时结束');
				this.APICode = "last"; //验证码过期结束
			},
			toRegister() {
				this.$refs.uForm.validate().then(ans => {
					if (!((this.user.nickname != "") && (this.user.username != "") && (this.user.password != "") &&
							(this.user
								.mail != "") && (this.user.phone != "") && (this.code != ""))) {
						this.fillMsg("error", "请填写完整信息!");
					} else {
						// console.log("你输入的验证码:", this.code);
						if (this.APICode == "last") {
							this.fillMsg("error", "验证码已过期，请重新获取！");
						} else if (this.code != this.APICode) {
							this.fillMsg("error", "验证码错误!");
						} else {
							console.log("注册信息：", this.user);
							setTimeout(() => {
								register({
									username: this.user.username,
									nickname: this.user.nickname,
									password: this.user.password,
									phone: this.user.phone,
									mail: this.user.mail,
									avatar: this.user.avatar
								}).then(res => {
									console.log("请求API接口【/user/register】", res);
									if (res.data.result) {
										this.fillMsg("success", "注册成功");
										setTimeout(() => {
											uni.redirectTo({ //关闭当前页面，跳转到应用内的某个页面
												url: "/pages/login/login"
											})
										}, 1500)
									} else if (res.data.code == "50005") {
										this.fillMsg("error", "该账号已被注册！换个账号吧");
									} else {
										this.fillMsg("error", "该邮箱已注册过, 请登录 ");
										setTimeout(() => {
											uni.reLaunch({
												url: "/pages/login/login"
											})
										}, 1500)
									}
								})
							}, 500)
						}
					}
				}).catch(err => {
					this.fillMsg("error", "校验失败");
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('/static/background.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.app {
		display: flex;
		flex-direction: column;
		// align-items: center;
		margin: 30rpx;

		.pic {
			width: 300rpx;
			height: 300rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			margin: 300rpx 200rpx 30rpx 200rpx;
			// background-color: black;
			border-radius: 50%;
			border: 1px solid #E3F4FF;
			box-shadow: 0 0 10rpx 10rpx rgba(139, 205, 255, 0.5);

			image {
				height: 100%;
				width: 100%;
				// border-radius: 50%;
			}
		}

		.mid {
			margin: 30rpx 20rpx;
			background-color: #ffffff;
			padding: 30rpx 40rpx;
			opacity: 0.9;
			border-radius: 30rpx;
			box-shadow: 0rpx 0rpx 15rpx 15rpx rgba(149, 149, 149, 0.5);

			.username {}

			.password {}

			.mail {
				padding: 15rpx 0rpx;
			}

			.code {
				margin: 100rpx 0prx;
				display: flex;
				justify-content: space-between;
				opacity: 1.0;

				.codenum {}

				.box {
					width: 220rpx;
				}
			}

			.register {
				margin: 30rpx 0;
				height: 90rpx;
				border-radius: 30rpx;

				text {
					font-size: 40rpx;
				}
			}
		}

	}
</style>
